<template>
  <div class="content-block block-6">
    <div class="info-head">{{ title }}</div>
    <div class="info-content" ref="container">
      <v-chart ref="chart" :option="chartOption" :style="{width: '100%', height: height}"></v-chart>
    </div>
  </div>
</template>

<script>
import ChartResizeListener from '@/mixins/chart-resize-listener'
import { defaultNumber } from '@/utils'

export default {
  name: 'grid-item-six',
  mixins: [ChartResizeListener],
  props: {
    color: {
      type: String,
      default: '#ffc107'
    },
    height: {
      type: String,
      default: '260px'
    },
    data: {
      type: Object,
      default () {
        return {};
      }
    }
  },

  computed: {
    enterpriseId () {
      return this.$route.query.enterpriseCode
    },
    title () {
      return this.data.name || '';
    },
    serie () {
      return this.data.series && this.data.series[0]
       ? this.data.series[0]
       : {};
    },
    unit () {
      return this.serie.unit || '';
    },
    chartOption () {
      const unit = this.unit;
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          valueFormatter: value => `${defaultNumber(value)} ${unit}`
        },
        xAxis: {
          type: 'category',
          data: this.data.xaxis ? (this.data.xaxis.data || []) : []
        },
        yAxis: {
          type: 'value',
          name: unit,
        },
        series: [
          {
            type: 'line',
            name: this.title,
            itemStyle: {
              color: this.color
            },
            smooth: true,
            data: this.serie.data || []
          }
        ]
      }
    }
  },
}
</script>
